<!-- 富文本编辑器 -->
<template>
  <editor :api-key="apiKey" :init="editConfig" v-model="content" />
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
export default {
  components: {
    editor: Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  watch: {
    value(val) {
      this.content = val
    },
    content(val) {
      this.$emit('input', val)
    }
  },
  created() {
    this.content = this.value
  },
  data() {
    return {
      content: '',
      apiKey: 'fmpe10wgtn5cy4tq0quwhxd21a2mb6z7pwuf0zsut09xk039', // key值从官网注册申请来的
      // 编辑器配置
      editConfig: {
        height: 400, // 富文本高度
        language_url: (process.env.NODE_ENV !== 'development' ? '/demandCollect' : '') + '/tinymce/zh_CN.js', // 中文包
        language: 'zh_CN', // 中文
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: true, // 禁用编辑器底部的状态栏
        statusbar: true, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 是否允许粘贴图像
        menubar: true, // 隐藏最上方menu
        fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', // 字体
        file_picker_types: 'image',
        images_upload_credentials: true,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
        // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
        images_upload_handler: (blobInfo, success, failure) => {
          // 上传图片接口，跟后端同事协调上传图片
          this.$api.upload({ files: blobInfo.blob() }).then(res => {
            success(res.data[0].path)
          }).catch(err => {
            failure(err)
          })
        }
      }
    }
  }
}
</script>
<style>
.tox-tinymce-aux {
  z-index: 4000 !important;
}
</style>
